<template>
	<div class="TpUserNum">
		<router-link to="/TpUserNumAdd">
		<div class="TpUserNum-title">
			+常用入住人
		</div>
		</router-link>
		<yd-cell-group>
			<yd-cell-item v-for="item,key in CheckInList" :key="key" arrow @click.native="GOTpUserNumAdd(item.checkInId)">
				<span slot="left" class="tpunitem-left">
            	<p>{{item.checkInName}}</p>
            	<dd>{{item.checkInPhone}}</dd>
            </span>
				<span slot="right"></span>
			</yd-cell-item>
		</yd-cell-group>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "TpUserNum",
		data() {
			return {
				
			}
		},
		computed: {
			...mapGetters([
				'source',
				'CheckInList'
			])
		},
		mounted(){
			this.GetCheckInList()
		},
		methods: {
			...mapActions({
				getCheckInList:"getCheckInList"
			}),
			GOTpUserNumAdd(checkInId){
				this.$router.push({
					path:"/TpUserNumAdd",
					query:{
						checkInId:checkInId
					}
				})
			},
			GetCheckInList() {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				let ajaxSign = {
					source:this.source,// string 是 ios
					token:getHiss.token// string 是 token
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetCheckInList(ajaxData)
				.then(res=>{
					this.getCheckInList(res.result)
				})
			}
		}
	}
</script>

<style>
	.TpUserNum {
		font-size: .28rem;
		background: #EEECEC;
		padding-top: .26rem;
		box-sizing: border-box;
	}
	
	.tpunitem-left {
		color: #282828;
	}
	
	.TpUserNum-title {
		color: #e25051;
		text-align: center;
		line-height: .94rem;
		margin-bottom: .26rem;
		background: #fff;
	}
	.TpUserNum .yd-cell:after{
		display: none !important; 
	}
</style>